import React from 'react'
import GroupLabel from './groupLabel'
import GroupContent from './groupContent'
import GroupStep from './groupStep'

const style = {
  margin: '6px 3px 0',
  textAlign: 'center',
  float: 'left',
  listStyle: 'none',
}

export default function (props) {
  const { children, title, last } = props
  return (
    <React.Fragment>
      <li style={style}>
        <GroupContent>
          {children}
        </GroupContent>
        <GroupLabel title={title} />
      </li>
      {
        last !== true
        && <GroupStep />
      }
    </React.Fragment>
  )
}
